<template>
  <div class="operate">
    <!-- 当日 / 当月 -->
    <div class="plate">
      <!-- 采购量 -->
      <view-item>
        <div slot="itemData" class="plateData">
          <div class="left">
            <i class="bossVersion">&#xe606;</i>
            <p class="tips">采购量</p>
          </div>
          <em></em>
          <div class="right">
            <!-- 当日 -->
            <div class="day">
              <p class="txt">当日</p>
              <p class="num">
                <i-count-up
                :startVal="startVal"
                :endVal="totalData.currentDayPurchaseWeight"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
                <!-- <span>{{parseInt(totalData.currentDayPurchaseWeight)}}<i v-if="(Math.floor(totalData.currentDayPurchaseWeight*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.currentDayPurchaseWeight*100)/100).toString().substring((Math.floor(totalData.currentDayPurchaseWeight*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.currentDayPurchaseWeight*100)/100).toString().length)}}</i></span> -->
                <i class="units">吨</i>
              </p>
            </div>
            <!-- 当月 -->
            <div class="mouth">
              <p class="txt">当月</p>
              <p class="num">
                <i-count-up
                :startVal="startVal"
                :endVal="totalData.currentMonthPurchaseWeight"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
                <!-- <span>{{parseInt(totalData.currentMonthPurchaseWeight)}}<i v-if="(Math.floor(totalData.currentMonthPurchaseWeight*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.currentMonthPurchaseWeight*100)/100).toString().substring((Math.floor(totalData.currentMonthPurchaseWeight*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.currentMonthPurchaseWeight*100)/100).toString().length)}}</i></span> -->
                <i class="units">吨</i>
              </p>
            </div>
          </div>
        </div>
      </view-item>
      <!-- 销售量 -->
      <view-item>
        <div slot="itemData" class="plateData">
          <div class="left">
            <i class="bossVersion">&#xe60c;</i>
            <p class="tips">销售量</p>
          </div>
          <em></em>
          <div class="right">
            <!-- 当日 -->
            <div class="day">
              <p class="txt">当日</p>
              <p class="num">
                <i-count-up
                :startVal="startVal"
                :endVal="totalData.currentDaySaleWeight"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
                <!-- <span>{{parseInt(totalData.currentDaySaleWeight)}}<i v-if="(Math.floor(totalData.currentDaySaleWeight*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.currentDaySaleWeight*100)/100).toString().substring((Math.floor(totalData.currentDaySaleWeight*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.currentDaySaleWeight*100)/100).toString().length)}}</i></span> -->
                <i class="units">吨</i>
              </p>
            </div>
            <!-- 当月 -->
            <div class="mouth">
              <p class="txt">当月</p>
              <p class="num">
                <i-count-up
                :startVal="startVal"
                :endVal="totalData.currentMonthSaleWeight"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
                <!-- <span>{{parseInt(totalData.currentMonthSaleWeight)}}<i v-if="(Math.floor(totalData.currentMonthSaleWeight*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.currentMonthSaleWeight*100)/100).toString().substring((Math.floor(totalData.currentMonthSaleWeight*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.currentMonthSaleWeight*100)/100).toString().length)}}</i></span> -->
                <i class="units">吨</i>
              </p>
            </div>
          </div>
        </div>
      </view-item>
      <!-- 销售额 -->
      <view-item>
        <div slot="itemData" class="plateData">
          <div class="left">
            <i class="bossVersion">&#xe60a;</i>
            <p class="tips">销售额</p>
          </div>
          <em></em>
          <div class="right">
            <!-- 当日 -->
            <div class="day">
              <p class="txt">当日</p>
              <p class="num">
                <i-count-up
                :startVal="startVal"
                :endVal="totalData.currentDaySalePrice"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
                <!-- <span>{{parseInt(totalData.currentDaySalePrice)}}<i v-if="(Math.floor(totalData.currentDaySalePrice*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.currentDaySalePrice*100)/100).toString().substring((Math.floor(totalData.currentDaySalePrice*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.currentDaySalePrice*100)/100).toString().length)}}</i></span> -->
                <i class="units">万元</i>
              </p>
            </div>
            <!-- 当月 -->
            <div class="mouth">
              <p class="txt">当月</p>
              <p class="num">
                <i-count-up
                :startVal="startVal"
                :endVal="totalData.currentMonthSalePrice"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
                <!-- <span>{{parseInt(totalData.currentMonthSalePrice)}}<i v-if="(Math.floor(totalData.currentMonthSalePrice*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.currentMonthSalePrice*100)/100).toString().substring((Math.floor(totalData.currentMonthSalePrice*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.currentMonthSalePrice*100)/100).toString().length)}}</i></span> -->
                <i class="units">万元</i>
              </p>
            </div>
          </div>
        </div>
      </view-item>
      <!-- 库存量 -->
      <view-item>
        <div slot="itemData" class="plateData">
          <div class="left">
            <i class="bossVersion">&#xe60e;</i>
            <p class="tips">库存量</p>
          </div>
          <em></em>
          <div class="right">
            <!-- 总量 -->
            <div class="day">
              <p class="txt">总量</p>
              <p class="num">
                <i-count-up
                :startVal="startVal"
                :endVal="totalData.inventoryStat.totalWeight"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
                <!-- <span>{{parseInt(totalData.inventoryStat.totalWeight)}}<i v-if="(Math.floor(totalData.inventoryStat.totalWeight*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.inventoryStat.totalWeight*100)/100).toString().substring((Math.floor(totalData.inventoryStat.totalWeight*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.inventoryStat.totalWeight*100)/100).toString().length)}}</i></span> -->
                <i class="units">吨</i>
              </p>
            </div>
            <!-- 总价 -->
            <div class="mouth">
              <p class="txt">总价</p>
              <p class="num">
                <i-count-up
                :startVal="startVal"
                :endVal="totalData.inventoryStat.inventoryCostValue"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
                <!-- <span>{{parseInt(totalData.inventoryStat.inventoryCostValue)}}<i v-if="(Math.floor(totalData.inventoryStat.inventoryCostValue*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.inventoryStat.inventoryCostValue*100)/100).toString().substring((Math.floor(totalData.inventoryStat.inventoryCostValue*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.inventoryStat.inventoryCostValue*100)/100).toString().length)}}</i></span> -->
                <i class="units">万元</i>
              </p>
            </div>
          </div>
        </div>
      </view-item>
    </div>
    <!-- 采购统计 -->
    <div class="purchaseCount">
      <item-title>
        <span slot="txt" class="txt">采购统计</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:吨</div>
          <line-chartss id="mylineChartss" v-model="purchaseArr" :option="lineChartOption"></line-chartss>
        </div>
      </view-item>
    </div>
    <!-- 销量统计 -->
    <div class="volumeCount">
      <item-title>
        <span slot="txt" class="txt">销量统计</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:万元</div>
          <bar-line-charts v-model="salesStatisticsArr" :option="salesStatisticsOption"></bar-line-charts>
        </div>
      </view-item>
    </div>
    <!-- 市场占比 (主要销售市场) -->
    <div class="market">
      <item-title>
        <span slot="txt" class="txt">
          市场占比
          <i>(主要销售市场)</i>
        </span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData pieData">
          <div class="left">
            <div class="chartTips">单位:吨</div>
            <pie-chart v-model="marketShareArr" :option="shareOption"></pie-chart>
          </div>
          <em></em>
          <div class="right">
            <p>点击左边各项
              <br>以显示明细
            </p>
          </div>
        </div>
      </view-item>
    </div>
    <!-- 销量商品占比 -->
    <div class="goods">
      <item-title>
        <span slot="txt" class="txt">销量商品占比</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData pieData">
          <div class="left">
            <div class="chartTips">单位:吨</div>
            <pie-chart v-model="salesVolumeArr" :option="shareOption"></pie-chart>
          </div>
          <em></em>
          <div class="right">
            <p>点击左边各项
              <br>以显示明细
            </p>
          </div>
        </div>
      </view-item>
    </div>
    <!-- 平台用户情况 -->
    <div class="userSituation">
      <item-title>
        <span slot="txt" class="txt">平台用户情况</span>
      </item-title>
      <view-item>
        <div slot="itemData" class="itemData userSituationData">
          <div class="left">
            <p class="txt">平台用户数</p>
            <p class="num flex-ib">
              495,763
              <i class="units">人</i>
            </p>
          </div>
          <em></em>
          <div class="right">
            <div class="day">
              <p class="txt">日增长</p>
              <p class="num flex-ib">
                63
                <i class="units">人</i>
              </p>
            </div>
            <div class="rote">
              <p class="txt">增长率</p>
              <p class="num flex-ib">
                12
                <i class="units">%</i>
              </p>
            </div>
          </div>
        </div>
      </view-item>
    </div>
    <!-- 用户访问量 -->
    <div class="visit">
      <item-title>
        <span slot="txt" class="txt">用户访问量</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:人</div>
          <line-chart v-model="userVisitsArr" :option="userVisitsArrOption"></line-chart>
        </div>
      </view-item>
    </div>
  </div>
</template>

<script>
import ICountUp from "vue-countup-v2";
import lineChart from "@/components/Chart/lineChart";
import pieChart from "@/components/Chart/pieChart";
import barLineCharts from "@/components/Chart/barLineCharts";
import lineChartss from "@/components/Chart/lineChartssSmooth";
import itemTitle from "@/components/bossVersion/itemTitle";
import viewItem from "@/components/bossVersion/viewItem";
import {
  GetLargeScreenDataForBoss,
  GetSteelRingPageView
} from "@/api/bossVersion/SteelRingForSelfSupport";
export default {
  components: {
    ICountUp,
    lineChart,
    pieChart,
    barLineCharts,
    lineChartss,
    itemTitle,
    viewItem
  },
  data() {
    return {
      // 数字
      startVal: 0,
      endVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      userData: {
        growthRate: "0",
        lastMonthAddMemberCount: 0,
        memberVisitorCountList: [],
        monthBeforeLastAddMemberCount: 0,
        totalCount: 0
      },
      totalData: {
        currentDayPurchaseWeight: 0,
        currentMonthPurchaseWeight: 0,
        currentDaySalePrice: 0,
        currentMonthSalePrice: 0,
        currentDaySaleWeight: 0,
        currentMonthSaleWeight: 0,
        inventoryStat: {
          totalWeight: 0,
          inventoryCostValue: 0
        },
        purchaseStatList: [],
        saleStatList: [
          {
            day: 0,
            dayStr: "string",
            saleTotalWeight: 0,
            saleTotalPrice: 0
          }
        ],
        marketShareList: [
          {
            totalWeight: 0,
            area: "string",
            percentage: 0
          }
        ],
        proportionGoodsSoldList: [
          {
            totalWeight: 0,
            productName: "string",
            percentage: 0
          }
        ]
      },
      userVisitsArr: [], // 用户访问量
      userVisitsArrOption: {
        grid: {
          top: "20%",
          left: "10%",
          width: "90%",
          height: "50%"
        },
        showSymbol: "none",
        label: {
          show: false
        },
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 45,
            interval: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "#48e5ff"
              }
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "#48e5ff"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(47, 240, 210, 0.2)",
              type: "dashed"
            }
          }
        },
        startColor: "rgba(40,231,135,0.3)",
        endColor: "rgba(40,231,135,0.1)",
        color: "#28e787"
      },
      salesVolumeArr: [], // 销量商品占比
      marketShareArr: [], // 市场占比
      shareOption: {
        color: ["#48e5ff", "#f0bd26", "#28e787", "#ff3e9a", "#FF7145"],
        radius: ["35%", "55%"],
        center: ["50%", "55%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      salesStatisticsArr: [], // 销量统计
      // 销量统计 option
      salesStatisticsOption: {
        color: "#FF3E9A",
        isColor: "#FF3E9A",
        startColor: "#00D1FF",
        endColor: "#088CEB",
        legend: {
          show: true,
          top: -5,
          right: 0,
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        barWidth: 10,
        noSmooth: true,
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        grid: {
          height: "50%",
          top: "20%",
          left: "12%"
        },
        unit: [" 吨", " 吨"],
        lineStyle: {
          color: "#FF3E9A"
        },
        itemStyle: false
        // itemStyle: {
        //   color: "#FF3E9A"   //柱状图点的颜色。
        // }
      },
      purchaseArr: [], // 采购统计
      // 采购统计 opion
      lineChartOption: {
        dataZoom: [
          {
            show: false
          }
        ],
        toolTipTxtColor: "#48e5ff",
        grid: {
          top: "20%",
          left: "12%",
          height: "50%"
        },
        legendColor: "#48e5ff",
        legend: {
          top: -5,
          right: 0,
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        hideLineColor: true,
        showSymbol: "none",
        tooltip: {
          show: true,
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          }
        },
        showLabel: false,
        xAxis: {
          z: 10,
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            rotate: 45,
            inside: false,
            rich: {
              value: {
                color: "#48e5ff"
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(47, 240, 210, 0.2)",
              type: "dashed"
            }
          },
          axisLabel: {
            color: "#48e5ff"
          }
        },
        color: ["#FAAF3B", "#28e787", "#ff3e9a", "#48e5ff", "#ff7145"]
      }
    };
  },
  mounted() {
    this.GetTotalData();
    this.GetUserVisitsArr();
  },
  methods: {
    // 访问量相关
    async GetUserVisitsArr() {
      try {
        var res = await GetSteelRingPageView();
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "userData", resData);
          resData.memberVisitorCountList.forEach(element => {
            element.name = this.$utils.formatterMonthFun(
              element.memberVisitorMonth
            );
            element.value = element.memberVisitorCount;
          });
          this.$set(this, "userVisitsArr", resData.memberVisitorCountList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 上部总数据
    async GetTotalData() {
      try {
        var res = await GetLargeScreenDataForBoss();
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "totalData", resData);
          this.setPurchaseStats(resData);
          this.setSaleStats(resData);
          this.setPieCharts(resData);
          // debugger;
        }
      } catch (e) {
        console.log(e);
      }
    },
    setPurchaseStats(resData) {
      var purchaseStats = [];
      resData.purchaseStatList.forEach(item => {
        var obj = {
          name: "",
          list: []
        };
        obj.name = this.$utils.formatterMonthFun(item.dayStr);
        obj.list = [
          {
            name: "整体",
            value: item.purchaseTotalWeight
          },
          {
            name: "厂采",
            value: item.factoryPurchaseWeight
          },
          {
            name: "地采",
            value: item.supplierPurchaseWeight
          }
        ];
        purchaseStats.push(obj);
      });
      this.$set(this, "purchaseArr", purchaseStats); // 采购统计
    },
    setSaleStats(resData) {
      var salesStatisticsArr = [
        {
          name: "销量",
          type: "bar",
          option: {},
          value: []
        },
        {
          name: "趋势",
          type: "line",
          option: {},
          value: []
        }
      ];
      resData.saleStatList.forEach(item => {
        var obj = {
          name: "",
          value: 0
        };
        obj.name = this.$utils.formatterMonthFun(item.dayStr);
        obj.value = item.saleTotalWeight;
        salesStatisticsArr[0].value.push(obj);
        salesStatisticsArr[1].value.push(obj);
      });
      this.$set(this, "salesStatisticsArr", salesStatisticsArr);
    },
    setPieCharts(resData) {
      var marketShareList = [];
      var proportionGoodsSoldList = [];
      resData.marketShareList.forEach(item => {
        var obj = {
          name: "",
          value: 0
        };
        obj.name = item.area;
        obj.value = item.totalWeight;
        marketShareList.push(obj);
      });
      this.$set(this, "marketShareArr", marketShareList);
      resData.proportionGoodsSoldList.forEach(item => {
        var obj = {
          name: "",
          value: 0
        };
        // obj.name = item.productName.slice(5, item.productName.length);
        obj.name = item.productName;
        obj.value = item.totalWeight;
        proportionGoodsSoldList.push(obj);
      });
      this.$set(this, "salesVolumeArr", proportionGoodsSoldList);
      // debugger;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/bossVersion/_basics";
.operate {
  line-height: 1;
  .plate {
    & > .item {
      width: 100%;
      height: 1.35rem;
      margin-bottom: 0.1rem;
      &:nth-of-type(1) {
        color: $color3;
      }
      &:nth-of-type(2) {
        color: $color4;
      }
      &:nth-of-type(3) {
        color: $color5;
      }
      &:nth-of-type(4) {
        color: $color1;
      }
      &:nth-last-of-type(1) {
        margin-bottom: 0;
      }
      & > .plateData {
        @include flexYcen;
        height: 100%;
        & > .left {
          width: 1.06rem;
          text-align: center;
          & > .tips {
            margin-top: 0.05rem;
            @include bold(0.16rem);
          }
        }
        & > em {
          width: 1px;
          height: 0.9rem;
          margin: 0 0.15rem;
          background-color: $color9;
        }
        & > .right {
          width: calc(100% - 1.06rem);
          & > .day {
            margin-bottom: 0.1rem;
            & > .txt {
              margin-bottom: 0.03rem;
              font-size: 0.14rem;
            }
            & > .num {
              & > span {
                @include din(0.3rem);
              }
              & > .units {
                font-size: 0.12rem;
              }
            }
          }
          & > .mouth {
            & > .txt {
              margin-bottom: 0.03rem;
              font-size: 0.12rem;
            }
            & > .num {
              & > span {
                @include din(0.18rem);
              }
              & > .units {
                font-size: 0.12rem;
              }
            }
          }
        }
      }
    }
  }
  .chartItem {
    width: 100%;
    height: 1.65rem;
    & > .pieData {
      display: flex;
      align-items: center;
      & > .left {
        width: calc(100% - 1.06rem);
        height: 100%;
      }
      & > em {
        width: 1px;
        height: 1.25rem;
        background-color: $color9;
      }
      & > .right {
        width: 1.06rem;
        & > p {
          color: $color1;
          font-size: 0.12rem;
          text-align: center;
          line-height: 1.5;
        }
      }
      & > .trial {
        & > p {
          color: $budget;
        }
        & > .num {
          @include din(0.2rem);
          & > .units {
            font-size: 0.12rem;
          }
        }
        & > .rote {
          @include din(0.14rem);
          & > i {
            font-size: 0.12rem;
          }
        }
      }
    }
  }
  .userSituation {
    & > .item {
      width: 100%;
      height: 1.35rem;
      & > .userSituationData {
        @include flexYcen;
        .left {
          width: calc(100% / 2);
          padding-left: 0.38rem;
          color: $budget;
          .txt {
            font-size: 0.14rem;
          }
          .num {
            margin-top: 0.03rem;
            @include din(0.35rem);
            .units {
              margin-left: 0.03rem;
              font-size: 0.14rem;
            }
          }
        }
        em {
          width: 1px;
          height: 0.9rem;
          margin: 0 0.15rem;
          background-color: $color9;
        }
        .right {
          width: calc(100% / 2);
          padding-left: 0.38rem;
          color: $color4;
          .day {
            margin-bottom: 0.1rem;
            .units {
              margin-left: 0.03rem;
            }
          }
          .txt {
            font-size: 0.12rem;
          }
          .num {
            @include din(0.2rem);
            margin-top: 0.03rem;
            & > .units {
              font-size: 0.12rem;
            }
          }
        }
      }
    }
  }
  .chartTips {
    @include absoluteTLSide(0, 0, 1);
  }
}
</style>
